<!--
* @Autor: 黄旗
* @Date: 2020-07-17 09:00:14
-->
<template>
<Row type="flex" justify="space-between" class="ivu-mb-16">
	<Col v-if="searchData.left">
		<Row :gutter="8" type="flex" align="middle" class="ivu-mb-8">
			<Col v-for="(item, index) in searchData.left" :key="index">
				<slot v-if="item.key === 'slot'" :name="item.keys"></slot>
				<JG-Input
					v-if="item.key === 'Input'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-input="$emit(item.callback ? 'on-input-' + item.callback : 'on-input', $event)"
				/>
				<JG-DatePicker
					v-if="item.key === 'DatePicker'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-clear="$emit(item.callback ? 'on-clear-' + item.callback : 'on-clear', $event)"
				/>
				<JG-Select
					v-if="item.key === 'Select'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-query-change="$emit(item.callback ? 'on-query-change-' + item.callback : 'on-query-change', $event)"
					@on-clear="$emit(item.callback ? 'on-clear-' + item.callback : 'on-clear', $event)"
				/>
				<JG-TreeSelect
					v-if="item.key === 'TreeSelect'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"

				/>
				<JG-Cascader
					v-if="item.key === 'Cascader'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-RadioGroup
					v-if="item.key === 'RadioGroup'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-Checkbox
					v-if="item.key === 'Checkbox'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-Button
					v-if="item.key === 'Button'"
					:params="item"
					@click="$emit(item.callback ? 'click-' + item.callback : 'click', $event)"
				/>
			</Col>
		</Row>
	</Col>
	<Col v-if="searchData.right">
		<Row :gutter="8" type="flex" class="ivu-mb-8">
			<Col v-for="(item, index) in searchData.right" :key="index">
				<slot v-if="item.key === 'slot'" :name="item.keys"></slot>
				<JG-Input
					v-if="item.key === 'Input'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-input="$emit(item.callback ? 'on-input-' + item.callback : 'on-input', $event)"
				/>
				<JG-DatePicker
					v-if="item.key === 'DatePicker'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-clear="$emit(item.callback ? 'on-clear-' + item.callback : 'on-clear', $event)"
				/>
				<JG-Select
					v-if="item.key === 'Select'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
					@on-query-change="$emit(item.callback ? 'on-query-change-' + item.callback : 'on-query-change', $event)"
					@on-clear="$emit(item.callback ? 'on-clear-' + item.callback : 'on-clear', $event)"
				/>
				<JG-TreeSelect
					v-if="item.key === 'TreeSelect'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"

				/>
				<JG-Cascader
					v-if="item.key === 'Cascader'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-RadioGroup
					v-if="item.key === 'RadioGroup'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-Checkbox
					v-if="item.key === 'Checkbox'"
					:params="item"
					@on-change="$emit(item.callback ? 'on-change-' + item.callback : 'on-change', $event)"
				/>
				<JG-Button
					v-if="item.key === 'Button'"
					:params="item"
					@click="$emit(item.callback ? 'click-' + item.callback : 'click', $event)"
				/>
			</Col>
		</Row>
	</Col>
</Row>
</template>

<script>
    import JGInput from './Input'
    import JGDatePicker from './DatePicker'
    import JGSelect from './Select'
    import JGTreeSelect from './TreeSelect'
    import JGCascader from './Cascader'
    import JGRadioGroup from './RadioGroup'
    import JGCheckbox from './Checkbox'
    import JGButton from './Button'
    export default {
        components: {
            JGInput,
            JGDatePicker,
            JGSelect,
            JGTreeSelect,
            JGCascader,
            JGRadioGroup,
            JGCheckbox,
            JGButton
        },
        props: ['searchData'],
        methods: {
        }
    };
</script>
